<template>
  <div>
    <img src=".././assets/logo.png" />
    <h1>vuex使用</h1>
    <el-button type="info">vuex获取到的参数：{{ getState }}</el-button>
    <el-button type="primary" @click="diyiClick">第一种写法</el-button>
    <el-button type="success" @click="dierClick">第二种写法</el-button>
    <div style="height: 50px"></div>
    <el-button type="warning" @click="actionsClick">第三种 actions</el-button>
    <el-button type="info"
      >vuex获取到的actions参数：{{ currDbSource }}</el-button
    >
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      // https://blog.csdn.net/qq_43363884/article/details/95948884
    }
  },
  computed: {
    ...mapState({
      getState: state => state.user.vuexNum,
      currDbSource: state => state.user.currDbSource

    })
  },
  methods: {
    ...mapMutations([
      'changeCity'
    ]),
    // 第一种写法需要使用 ...mapMutations
    diyiClick () {
      this.changeCity('传递的参数第一')
    },
    // 第二种写法  不需要使用 ...mapMutations
    dierClick () {
      this.$store.commit('changeCity', '传递的参数第二')
    },
    actionsClick () {
      var num = Math.floor(Math.random() * 10) + 1
      this.$store.dispatch('actionsCurrDbSource', '我是dispatch传递的数据' + num)
      this.$message('使用dispatch监听到vuex发生改变' + num)
    }

  },
  mounted () {
    console.log('生命周期222')
  },
  //   监听
  watch: {
    getState (file) {
      this.$message('监听到vuex发生改变：' + file)
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>
